<template>
 <van-swipe :autoplay="3000" lazy-render class="van-swipe">
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" />
  </van-swipe-item>
</van-swipe>
<main>
<div class="mainpush">
  <h3>今日主推</h3>
  <div class="pushbox">
    <div class="left">
      <h3>一秒幻彩 从心出发</h3>
      <p>快来参与小米10周年庆典</p>
      <button>围观>>>>></button>
    </div>
    <div class="right">
      <div class="r-top">
        <h3>小米黑科技</h3>
        <p>科技成就未来</p>
        <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E9%A6%96%E9%A1%B5_1/p36.png" alt="">
      </div>
      <div class="r-bottom">

        <h3>冰箱保鲜季</h3>
        <p>冰箱价保30天</p>
        <img src="https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E6%90%9C%E7%B4%A2%E7%AD%9B%E9%80%89/p66.png" alt="">
      </div>
    </div>
  </div>
</div>
<div class="explain">
  <van-grid :column-num="3">
  <van-grid-item v-for="value in list" :key="value.id" :icon="value.image" :text="value.title" @click="jumpto"/>
</van-grid>
</div>
</main>
</template>
<script>
import { Swipe, SwipeItem,Grid, GridItem, List } from 'vant';
import { getHomeData } from '../api/home';
import { ref } from 'vue';
export default {
  name: 'free',
  setup(){
    
    const list=ref([])
    const images = [
  'https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F1/u616.jpg',
  'https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F1/u619.jpg',
  'https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F1/u617.jpg',
  'https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F1/u618.jpg'    
];
    async function todeatil(){
      const result=await getHomeData()
      const{items}=result
      list.value.push(...items.list)
    }
    todeatil()

    
  return{images,list}
},
methods:{
  jumpto(){
    this.$router.push({
      path:'explain'
    })
  }
}

}

</script>
<style lang="less" scoped>
main{
  flex: 1;
  background-color: #eee;
}
.van-swipe{
  width: 100%;
  height: 211px;
  margin-top: 50px;
}
.van-swipe img{
  width: 100%;
  height: 100%;
}
.pushbox{
  width: 100%;
  display: flex;
  justify-content: center;
  .left{
    width: 210px;
    height: 210px;
    background: url('https://www.pmdaniu.com/storages/124137/4fd65663c237204d6e2adfba9b23af2f-103297/images/%E5%8F%91%E7%8E%B0%E6%A0%B7%E5%BC%8F3/u724.svg');
    p{
      color: #fff;
      font-size: 14px;
      margin-left: 20px;
    }
    button{
      outline: none;
      border: 1px solid #fff;
      background: rgba(255,255,255,0.1);
      font-size: 14px;
      color: #fff;
      margin-left: 20px;
    }
    h3{
      margin-left: 20px;
    }
  }
  
}
.pushbox .right .r-top{
  width: 134px;
  height: 105px;
  position: relative;
  img{
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0px;
    bottom: 0px;
  }
  h3{
    margin: 0;
  }
  p{
    color: #ff5722;
    font-size: 14px;
  }
}
.pushbox .right .r-bottom{
  width: 134px;
  height: 105px;
  position: relative;
  img{
    position: absolute;
    width: 60px;
    height: 60px;
    right: 0px;
    bottom: 0px;
  }
 h3{
  margin: 0;
 }
 p{
    color: #ff5722;
    font-size: 14px;
  }
}


</style>
